Vue Js v-pre directive: In Vue.js, the v-pre directive is used to tell Vue to skip the compilation for a particular element and its children. This can be useful if you have some content that you don’t want Vue to process, such as code examples or pre-rendered HTML.Here’s an example of how you might use the v-pre directive in a Vue.js application:
In this example, we have two <div> elements, one with the v-pre directive and one without. The <div> element with the v-pre directive will display the value of message exactly as it is, without any interpolation. The other <div> will display the value of message as a result of interpolation.
In other words, the first <div> will show {{ message }} as a string, but the second one will show Hello, World!.
This can be useful if you have some pre-rendered HTML that you don’t want Vue to touch or if you want to show some code examples in your application.
Vue JS Pre render HTML
<div id="app">
<div v-pre>{{ message }}</div>
<div>{{ message }}</div>
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
message: 'font awesome icons'
}
}
});
</script>
Output of above example
